<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="../../javascript/react.development.js"></script>
<script src="../../javascript/react-dom.development.js"></script>
<script src="../../javascript/babel.min.js"></script>
<script type="text/babel">

    class App extends React.Component {
        constructor(props, context) {
            console.log("constructor()方法在组件初始化的时候调用")
            super(props, context)
            this.state = {count: 1}
        }

        componentWillMount() {
            console.log("componentWillMount()方法在组件挂载之前(插入DOM树)之前调用")
        }

        componentWillReceiveProps(props){
            console.log("componentWillReceiveProps()方法在初始化render的时候不会执行，它会在Component接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染")
        }

        shouldComponentUpdate(nextProps, nextState) {
            //  组件是否需要更新，需要返回一个布尔值，返回true则更新，返回flase不更新
            //  shouldComponentUpdate()的返回值，判断React组件的输出是否受当前state或props更改的影响。默认行为是state每次发生变化组件都会重新渲染。大部分情况下应该遵循默认行为
            console.log("shouldComponentUpdate()方法返回的布尔值确定是否更新",nextProps, nextState)
            return true
        }

        componentWillUpdate(){
            console.log("componentWillUpdate()方法在组件更新之前调用")
        }

        componentDidUpdate(){
            console.log("componentDidUpdatee()方法在组件更新后立即调用")
        }

        render() {
            console.log("render()方法在组件初始化渲染和状态更新后立即调用")
            return (
                <div className="app">
                    <h1>当前的count值为{this.state.count}</h1>
                    <button onClick={this.addCount}>+1</button>
                    <button onClick={this.death}>销毁组件</button>
                    <button onClick={this.force}>强制更新组件</button>
                </div>
            );
        }

        componentDidMount() {
            console.log("componentDidMount()方法在组件挂载后(插入DOM树中)立即调用")
        }

        componentWillUnmount() {
            console.log("componentWillUnmount()方法在组件卸载及销毁之前直接调用")
        }

        death = () => {
            // 卸载组件(unmountComponentAtNode用于从DOM中移除一个已挂载的React组件)
            ReactDOM.unmountComponentAtNode(document.querySelector("#root"));
        }

        addCount = () => {
            this.setState((state) => {
                return {
                    count: state.count += 1
                }
            })
        }

        force=()=>{
            this.forceUpdate(()=>{
                console.log("组件被强制更新了")
            })
        }
    }

    ReactDOM.render(<App></App>, document.querySelector("#root"))
</script>
</body>
</html>